import { loginApi } from '@/api';
import type { FormItemProps } from 'antd';
import { Button, Form } from 'antd';
import React, { useState } from 'react';
import OStyle from '../index.less';
import type { BaseLoginProps, formValue } from '../interface';
import PhoneInput from '../PhoneInput';
import SendMSMCode, { SendStatusEnum } from './SendMSMCode';

const FormItem = Form.Item;
const CodeLogin: React.FC<BaseLoginProps> = (props) => {
  const { onSuccess } = props;

  const [loginName, setLoginName] = useState<string>();
  const [code, setCode] = useState<string>();
  const [isSubmit, setIsSubmit] = useState(false);
  const [errmsg, setErrmsg] = useState<{
    type: FormItemProps<formValue>['validateStatus'];
    text: React.ReactNode;
  }>({
    type: '',
    text: '',
  });
  const [codeStatus, setCodeStatus] = useState(SendStatusEnum.unSend); //验证码状态 0:未发送 5： 发送中

  // 提交
  const handleSubmit = () => {
    if (!loginName) {
      return setErrmsg({
        type: 'error',
        text: '手机号不能为空!',
      });
    }
    if (!/^(1)\d{10}$/.test(loginName)) {
      return setErrmsg({
        type: 'error',
        text: '手机号码有误，请核验后重试！',
      });
    }
    if (!code) {
      return setErrmsg({
        type: 'error',
        text: '请输入验证码！',
      });
    }
    setErrmsg({
      type: 'validating',
      text: '登录中...请稍后',
    });
    console.log('--loginName--code--:', loginName, code);
    setIsSubmit(true);
    loginApi
      .codeLogin({ loginName, code })
      .then(({ data, code, message }: any) => {
        if (code === '200') {
          // message.success('登录成功');
          setErrmsg({
            type: 'success',
            text: message,
          });
          onSuccess(data);
        } else {
          setErrmsg({
            type: 'error',
            text: message,
          });
        }
      })
      .catch((err) => {
        console.log('--CodeLogin--codeLogin--err --:', err);
      })
      .finally(() => {
        setIsSubmit(false);
      });
  };

  const onPhoneInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setLoginName(e.target.value);
  };

  const onCodeInputChange = (value: string | undefined) => {
    setCode(value);
  };

  return (
    <Form autoComplete="off" onFinish={handleSubmit}>
      <FormItem
        className={OStyle.input_wrap}
        name="loginName"
        style={{ marginTop: '23px', marginBottom: '32px', height: '64px' }}
      >
        <PhoneInput value={loginName} onChange={onPhoneInputChange} />
      </FormItem>
      <FormItem
        name="code"
        className={OStyle.input_wrap}
        validateStatus={errmsg.type}
        help={errmsg.text}
        style={{ marginBottom: errmsg.type ? 44 : undefined }}
      >
        <SendMSMCode
          mobile={loginName}
          onErrmsgChange={setErrmsg}
          value={code}
          onChange={onCodeInputChange}
          status={codeStatus}
          onStatusChange={setCodeStatus}
        />
      </FormItem>
      <FormItem style={{ marginBottom: 0 }}>
        <Button
          loading={isSubmit}
          type="primary"
          size="large"
          className={OStyle.login_submit}
          disabled={!loginName || !code || code.length !== 4 || codeStatus === SendStatusEnum.checkSend}
          // onClick={handleSubmit}
          htmlType="submit" // 回车键可触发form提交
        >
          登录
        </Button>
      </FormItem>
    </Form>
  );
};

export default CodeLogin;
